<template>
  <div class="dynamic-template">
    <x-collapse expand :title="t['静态模板']" class="px-4">
      <ul class="item-list">
        <template v-for="item in filterVideo(allShapeNav)" :key="item.title">
          <a-tooltip :content="item.title">
            <li
              class="px-1 text-center cursor-pointer mt-2"
              @click="selectNav(item)"
              @mouseenter="item.showSubItems = true"
            >
              <!-- 底部导航 -->
              <component :is="item.icon" :size="20"></component>
              <div class="text-gray-500 text-[12px] item-desc">{{ item.title }}</div>
            </li>
          </a-tooltip>
        </template>
      </ul>
    </x-collapse>
    <x-collapse expand :title="t['动态模板']" class="px-4">
      <ul class="flex gap-2 item-list mt-2">
        <li
          v-for="(item, key) in filterVideo(dynamicImageList)"
          :key="key"
          class="text-center cursor-pointer"
          @click="item.fieldCode == null ? item.event() : createShape(item)" 
        >
          <component :is="item.icon" :size="20"></component>
          <div class="text-[12px] text-gray-500 item-desc">{{ item.text }}</div>
        </li>
      </ul>
    </x-collapse>
    <x-collapse expand :title="t['动态文本']" class="px-4">
      <ul class="filed-list gap-2">
        <li
          v-for="(item, key) in filedList"
          :key="key"
          class="flex justify-center items-center cursor-pointer"
          @click="createDText(item)"
        >
          <div class="text-button text-wrap cursor-pointer text-[12px]">
            {{ item.fieldName }}
          </div>
        </li>
      </ul>
      <div
        v-if="query.pageSize !== query.total"
        class="load-more text-gray-500 text-center cursor-pointer"
        @click="loadMore"
      >
        {{ t["加载全部"] }}
      </div>
    </x-collapse>
  </div>
</template>

<script setup lang="ts">
import { findGoodsExpandFields } from "@/api/service/goods/goods";
import { stageConfig } from "@/views/paint/modules/data/stage";

import { IShapeNavConfigProps, IType } from "@/interface/IShape";
import {
  createBarcode,
  createDVideo,
  createDynamicBarcode,
  createDynamicImage,
  createDynamicQrcode,
  createDynamicText,
  createImage,
  createQrcode,
  createRect,
  createText,
  createVideo,
  createDynamicBarcodeNew,
  createDynamicImageNew,
  createDynamicQrcodeNew,
} from "@/store/events/shape.create";
import {
  IconCamera,
  IconFontColors,
  IconImage,
  IconPaste,
  IconQrcode,
  IconScan
} from "@arco-design/web-vue/es/icon";

const t = translate("公共模块");
const query = ref({
  total: 0,
  pageSize: 10,
  loadAll: true
});
const dynamicImageList = [
  {
    text: t.value?.["条形码"],
    icon: markRaw(IconScan),
    type: IType.BARCODE,
    event() {
      createDynamicBarcode();
    }
  },
  {
    text: t.value?.["二维码"],
    icon: markRaw(IconQrcode),
    type: IType.QRCODE,
    event() {
      createDynamicQrcode();
    }
  },
  {
    text: t.value?.["视频"],
    icon: markRaw(IconCamera),
    type: IType.VIDEO,
    event() {
      createDVideo();
    }
  },
  {
    text: t.value?.["图片"],
    icon: markRaw(IconImage),
    type: IType.IMAGE,
    event() {
      createDynamicImage();
    }
  }
];
const allShapeNav = [
  {
    icon: markRaw(IconScan),
    title: t.value?.["条形码"],
    showIcon: false,
    type: IType.BARCODE,
    showSubItems: false,
    event() {
      createBarcode();
    }
  },
  {
    icon: markRaw(IconImage),
    title: t.value?.["图片"],
    showIcon: false,
    type: IType.IMAGE,
    showSubItems: false,
    event() {
      createImage();
    }
  },
  {
    icon: markRaw(IconQrcode),
    title: t.value?.["二维码"],
    showIcon: false,
    type: IType.QRCODE,
    showSubItems: false,
    event() {
      createQrcode();
    }
  },
  {
    icon: markRaw(IconFontColors),
    title: t.value?.["文本"],
    showIcon: false,
    type: IType.TEXT,
    showSubItems: false,
    event() {
      createText();
    }
  },
  {
    icon: markRaw(IconPaste),
    title: t.value?.["矩形"],
    showIcon: false,
    type: IType.RECT,
    showSubItems: false,
    event() {
      createRect();
    }
  },
  {
    title: t.value?.["视频"],
    icon: markRaw(IconCamera),
    type: IType.VIDEO,
    showIcon: false,
    showSubItems: false,
    event() {
      createVideo();
    }
  }
];

const filedList = ref([] as Array<any>);

const getList = async () => {
  const fields = await findGoodsExpandFields(true);
  filedList.value=[];
  if (fields.code === 200) {
    query.value.total = fields.data.length;
    fields.data.forEach((item) => {
      if (item.fieldType === '0' || item.fieldType === '1') {
        filedList.value.push(item);
      }else if(item.fieldType === '2') {
        let str=item.fieldName;
        item.text = str;
        item.icon = markRaw(IconImage);
        item.type = IType.DIMAGE;
        item.event = createDynamicImage;
        dynamicImageList.push(item);
      }else if(item.fieldType === '3') {
        let str=item.fieldName;
        item.text = str;
        item.icon = markRaw(IconScan);
        item.type = IType.DBARCODE;
        item.event = createDynamicBarcode;
        dynamicImageList.push(item);
      }else if(item.fieldType === '4') {
        let str=item.fieldName;
        item.text = str;
        item.icon = markRaw(IconQrcode);
        item.type = IType.DQRCODE;
        item.event = createDynamicQrcode;
        dynamicImageList.push(item);
      }
    });
    console.log(filedList);
  }
};

/**
 * 注释:加载更多
 *
 * */
const loadMore = () => {
  query.value.pageSize = query.value.total;
  getList();
};
/**
 * 注释: 选择触发
 *
 * */
const selectNav = (item: IShapeNavConfigProps) => {
  item.event && item.event();
  item.showSubItems = !item.showSubItems;
};
/**
 * 注释: 创建动态字段
 *
 * */
const createDText = (item: any) => {
  createDynamicText(`{{${item.fieldName}}}`, item.fieldCode, item.fieldId, item.fieldType);
};

/**
 * 注释: 创建动态字段
 *
 * */
const createShape = (item: any) => {
  if(item.fieldType==='2'){
    createDynamicImageNew(item.fieldCode);
  }else if(item.fieldType==='3'){
    createDynamicBarcodeNew(item.fieldCode);
  }else if(item.fieldType==='4'){
    createDynamicQrcodeNew(item.fieldCode);
  }
};
onMounted(async () => {
  getList();
});

const filterVideo = (arr: any[]) => {
  return arr.filter((v) => {
    if (!stageConfig.value.lcd && v.type === IType.VIDEO) {
      return false;
    }
    return v;
  });
};
</script>

<style lang="scss" scoped>
.dynamic-template {
  width: 100%;
  color: var(--color-text-1);
  background: var(--color-bg-3);
  ul.filed-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 0.5fr));
    justify-content: space-between;
    li {
      text-align: center;
      height: 32px;
      border: 1px solid #eee;
    }
  }
  .item-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(58px, 0.3fr));
    flex-wrap: wrap;
    column-gap: 8px;
    .item-desc {
      line-height: 16px;
    }
  }
}
.load-more {
  font-size: 12px;
  line-height: 24px;
  border: 1px solid #eee;
  margin-top: 12px;
}
</style>
